<template>
  <div class="left_info_box Flex Font_s18">
    <div class="left_box left_bg_img">
      <p class="left_top_title ">全市社区机构TOP5</p>
      <ul class="top5_ui">
        <li>
          <span style="float: left;">1&nbsp;&nbsp;海门&nbsp;&nbsp;</span>
          <el-progress :percentage="100" :format="format" stroke-width=8
                       style="margin-left: 1.68rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">2&nbsp;&nbsp;通州&nbsp;&nbsp;</span>
          <el-progress :percentage="90" :format="format" stroke-width= 8
                       style="margin-left: 1.68rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">3&nbsp;&nbsp;如东&nbsp;&nbsp;</span>
          <el-progress :percentage="80" :format="format" stroke-width=8
                       style="margin-left: 1.68rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">4&nbsp;&nbsp;启东&nbsp;&nbsp;</span>
          <el-progress :percentage="75" :format="format" stroke-width=8
                       style="margin-left: 1.68rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">5&nbsp;&nbsp;安海&nbsp;&nbsp;</span>
          <el-progress :percentage="70" :format="format" stroke-width=8
                       style="margin-left: 1.68rem"></el-progress>
        </li>
      </ul>
      <p class="left_bottom_title ">各地区接待数统计</p>
      <ul class="receive_statistics_ui">
        <li>
          <span style="float: left;height: 2.5rem;line-height: 2.5rem;display: inline-block">海门</span>
        <!--  show-text="1230" :format="format"-->
          <el-progress :text-inside="true" :stroke-width="21" :percentage="100"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">启动</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="80"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">通州</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="80"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">如皋</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="90"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">如东</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="100"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">港闸</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="80"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">崇川</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="50"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
        <li>
          <span style="float: left;">通州湾</span>
          <el-progress :text-inside="true" :stroke-width="21" :percentage="60"
                       style="margin-left: 4rem;margin-top: 0.8rem"></el-progress>
        </li>
      </ul>
    </div>
    <div class="right_box right_bg_img" >
      <p class="jg_top5 Font_s28 FontWeightB">机构星级排行Top5</p>
      <img src="../../assets/img/communityPension/ic_xingxing.png"/>
      <ul class="star_ul" >
        <li>
          <i class="star_head"></i>
          <div class="star_content Font_s22">
            <p class="num">N0.1</p>
            <p class="star_title">南通启东综合养老服务中心</p>
          </div>
          <label class="star_num Font_s24 FontWeightB">5星</label>
        </li>
        <li>
          <i class="star_head"></i>
          <div class="star_content Font_s22">
            <p class="num">N0.2</p>
            <p class="star_title">南通通州社区服务中心</p>
          </div>
          <label class="star_num Font_s24 FontWeightB">5星</label>
        </li>
        <li>
          <i class="star_head"></i>
          <div class="star_content Font_s22">
            <p class="num">N0.3</p>
            <p class="star_title">南通如皋市综合养老服务中心 </p>
          </div>
          <label class="star_num Font_s24 FontWeightB">4星</label>
        </li>
        <li>
          <i class="star_head"></i>
          <div class="star_content Font_s22">
            <p class="num">N0.4</p>
            <p class="star_title">南通海安市为民服务中心</p>
          </div>
          <label class="star_num Font_s24 FontWeightB">4星</label>
        </li>
        <li>
          <i class="star_head"></i>
          <div class="star_content Font_s22">
            <p class="num">N0.5</p>
            <p class="star_title">南通港区社区老人服务中心</p>
          </div>
          <label class="star_num Font_s24 FontWeightB">4星</label>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: 'LeftInfo',
  methods: {
    format (percentage) {
      return percentage === 100 ? '' : ``
    }
  }
}
</script>

<style scoped lang="less">
  .left_info_box {
    width: 87.625rem;
    overflow: hidden;
    margin-top: 2rem;
    float: left;
   .el-progress-bar__outer{
      background-color: red;
    }
    .left_top_title, .left_bottom_title{
      color:rgba(255,255,255,1);
      text-align: left;
      margin: 1.875rem 1.75rem;
    }
    .left_bg_img{
      background: url("../../assets/img/communityPension/ic_top.png") no-repeat;
      background-size: 100% 100%;
    }
    .right_bg_img{
      background: url("../../assets/img/communityPension/ic_jigouxingji.png") no-repeat;
      background-size: 100% 100%;
    }
    .left_box{
      width: 38.25rem;
      height: 52.5625rem;
      margin: 0 1.5625rem 0 3.375rem;
      overflow-y: auto;
      .top5_ui li {
        height: 1.25rem;
        line-height: 1.25rem;
        margin:0 2.43rem 2rem 2.43rem;
        overflow: hidden;
      }
      .receive_statistics_ui li {
        height: 3.125rem;
        line-height: 3.125rem;
        overflow: hidden;
        margin:0 2.43rem 0 2.43rem;
      }
      .receive_statistics_ui li:last-child{
        margin-bottom: 2rem;
      }
    }
    .right_box{
      width: 44.4375rem;
      height: 52.5625rem;
      overflow-y: auto;
      .jg_top5{
        color:rgba(255,223,0,1);
        text-shadow:0px 0px 10px rgba(5,8,53,0.75);
        background:linear-gradient(0deg,rgba(99,207,231,1) 0%, rgba(255,255,255,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        margin: 1.875rem 0 1.5rem 0;
      }
      .star_ul li {
        height: 6.25rem;
        line-height: 6.25rem;
        margin: 1.4rem 2rem 1.5rem 2rem;
        overflow: hidden;
        background: url("../../assets/img/communityPension/ic_yuanjiao.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        padding-left: 7.56rem;
      }
      .star_head{
        position: absolute;
        height: 4.625rem;
        width: 4.625rem;
        background: url("../../assets/img/communityPension/ic_yi.png") no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        top: 0.8125rem;
        left: 0.8125rem;
      }
      .star_num{
        position: absolute;
        right: 2.875rem;
        height: 6.25rem;
        line-height: 6.25rem;
        top: 0;
      }
      .star_content {
        text-align: left;
        height: 6.25rem;
        margin-top: 1.625rem;
        .num {
          color:rgba(247,255,30,1);
          line-height: 1.5rem;
        }
        .star_title{
          line-height: 1.8rem;
        }
      }

    }
  }

</style>
